<template>
  <view class="page-container">
    <u-navbar :is-back="false" title="协同办公管理平台" title-color="#FFF" :background="{
					background: '#00a0e9',
				}">
      <image class='logo' src='../../static/images/login-logo.png'></image>
    </u-navbar>
    <view class="content">
      <view class="tabs">
        <view class="tabs-item active">
          <image class="icon" src="../../static/images/all.png" mode=""></image>
          <u-badge :offset="[-10,85]" class="badge" :count="indexData.count"></u-badge>
          全部待办
        </view>
        <view class="tabs-item" @click="routeTo({link:'progresslist'})">
          <image class="icon" src="../../static/images/icon-progress.png" mode=""></image>
          进度跟踪
        </view>
      </view>
      <view class="task">
        <scroll-view class="task-list" scroll-y show-scrollbar refresher-enabled @scrolltolower="viewScroll"
                     :refresher-triggered="triggered"
                     @refresherrefresh="refresh">
          <view class="task-item" v-for="it in indexData.taskList" :key='it.ID'
                @click="openTask(it)">
            <view class="task-item-name">{{ it.TITLE }}</view>
            <view class="task-item-desc">
              <view class="from">来自：{{ it.USER_USERNAME }}</view>
              <view class="date">时间：{{ it.BEGINTIME }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import tabbar from '../../components/tabbar.vue'
import UBadge from "../../uview-ui/components/u-badge/u-badge";

export default {
  components: {
    UBadge,
    tabbar
  },
  data() {
    return {
      status: 'loadmore',
      page: 1,
      triggered: false
    };
  },
  computed: {
    tabbarStyle() {
      return {
        background: '#00a0e9',
      }
    },
    indexData() {
      return this.$store.state.indexData
    }
  },
  methods: {
    async viewScroll(e) {
      this.triggered = true
      this.page++;
      await this.$store.dispatch('getTaskList', {
        page: this.page,
        loadMore: true
      })
      this.triggered = false
    },
    async refresh() {
      this.triggered = true
      this.page = 1
      await this.$store.dispatch('getTaskList', {
        page: this.page
      })
      this.triggered = false
    },
    openTask(it) {
      this.routeTo({
        link: 'approve',
        params: {
          id: it.ID,
          title: it.TITLE,
          openStatus: 8
        }
      })
    }
  },
  async onLoad() {
    let that = this;
	  await this.$store.dispatch('login')
    uni.$on('update', function (data) {
      switch (data.payload) {
        case "刷新待办":
          that.refresh()
          break
      }
    })
    this.refresh()
  }
}
</script>

<style lang="less">
.logo {
  width: 78rpx;
  height: 60rpx;
  margin-left: 100rpx;
}

.page-container {
  background: #f0f0f0;

  .content {
    padding: 20rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 0;

    .tabs {
      background: #FFF;
      display: flex;
      justify-content: space-around;
      //padding: 20rpx;
      border-radius: 10rpx;

      &-item {
        position: relative;
        font-size: 32rpx;
        //font-weight: 600;
        color: #000;
        display: flex;
        align-items: center;
        height: 58rpx;
        line-height: 58rpx;
        margin: 20rpx 0;
        flex: 1;
        justify-content: center;

        &:nth-child(1) {

          border-right: 1rpx solid #74787b;

        }

        &.active {
          color: #00a0e9;
        }

        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }

      .u-badge {
        background: #FFF;
        border: 2rpx solid red;
        color: red !important;
      }

    }

    .task {
      flex: 1;
      overflow: auto;
      margin-top: 20rpx;
      border-radius: 10rpx;

      &-list {
        width: calc(100% - 40rpx);
        background: #FFF;
        padding: 20rpx;
        height: calc(100% - 40rpx);
      }

      &-item {
        padding: 20rpx;
        position: relative;
        overflow: hidden;

        &:before {
          height: 2rpx;
          width: 100%;
          content: '';
          position: absolute;
          bottom: 0;
          //background: linear-gradient(to right, #999999, #999999 20rpx, transparent 20rpx, transparent);
          background-size: 28rpx 100%;
          border-bottom: 1px solid rgba(0, 0, 0, .1);
          left: 0;
        }

        .task-item-name {
          font-size: 28rpx;
          color: #000;
          margin-bottom: 10rpx;
          word-break: break-all;
        }

        .task-item-desc {
          display: flex;
          //justify-content: space-between;
          color: #999;
          font-size: 24rpx;

          .date {
            //color: #666666;
            margin-left: 40rpx;
          }
        }
      }
    }

  }

}

</style>
